<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>后台管理系统登陆</title>
    <header th:include="common/header::header"></header>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" href="/images/favicon.ico"/>
    <link rel="stylesheet" href="/css/login.css"/>
</head>
<body>
<div class="layui-carousel video_mask" id="login_carousel">
    <div carousel-item="">
        <div class="carousel_div1"></div>
        <!--<div class="carousel_div2"></div>-->
        <!--<div class="carousel_div3"></div>-->
    </div>
    <div class="login layui-anim layui-anim-up">
        <h1>消息系统后台管理系统</h1>
        <form class="layui-form" method="post">
            <div class="layui-form-item">
                <input type="text" id="userName" name="userName" lay-verify="required" placeholder="请输入账号" autocomplete="off" value=""
                       class="layui-input"/>
            </div>
            <div class="layui-form-item">
                <input type="password" id="passWord" name="passWord" lay-verify="required" placeholder="请输入密码" autocomplete="off"
                       value="" class="layui-input"/>
            </div>

            <button class="layui-btn login_btn" lay-submit="" lay-filter="login">登陆系统</button>
        </form>
    </div>
</div>

<script src="/layui/layui.js"></script>
<script>
    layui.use(['layer', 'jquery', 'carousel','form'], function () {
        var $ = layui.$,
        layer = layui.layer,
            carousel = layui.carousel,
        form=layui.form;

        /**背景图片轮播*/
        carousel.render({
            elem: '#login_carousel',
            width: '100%',
            height: '100%',
//            interval: 2000,
            arrow: 'none',
            anim: 'fade',
            indicator: 'none'
        });

        /**监听登陆提交*/
        form.on('submit(login)', function (data) {
           $.ajax({
               url: '/auth/ppdlogin',
               type: 'post',
               async: false,
               data : {
                   "userName" : $('#userName').val(),
                   "userPass" : $('#passWord').val()
               },
               success: function (data) {
                   if(data==1){
                       window.location.href="/index";
                   } else {
                       layer.msg("用户名密码错误！")
                   }
               }, error: function (data) {
                   layer.msg("登录失败")
               }
           });
		   return false;
        });

    });
</script>
</body>
</html>

